<!--  -->
<template>
  <div class="details-page" >
    <div v-if="coursesErrorType === 0">
      <div class="video-main">
        <video
          id="goods_video"
          ref="goodsVideo"
          style="width: 100%; height: 100%; object-fit: scale-down;"
          :poster="courses.img"
          :src="courses.link"
          :controls="false"
          webkit-playsinline="true"
          playsinline="true"
          x5-playsinline="true"
          x-webkit-airplay="true"
          x5-video-ignore-metadata="true"
          width="100%"
          height="100%"
          @click="onPlayer($event)"
          @ended="onPlayerEnded($event)"
          @play="onPlayerPlay($event)"
          @timeupdate="onTimeupdate($event)"
          @loadedmetadata="onLoadedmetadata($event)"
        >
          <source :src="courses.link" />
        </video>
        <div class="video-pay flex-a-c flex-j-s" @click.stop="videoPay" v-if="videoFlag">
          <span class="iconfont icon-ht_more_right"></span>
        </div>
        <div class="video-tag" v-if="liveDay && courses.courses_type == 1">直播</div>
        <div class="video-tag playback" v-if="backDay && courses.courses_type == 1">回放</div>
        <div class="video-make flex-a-c flex-j-c" v-if="timeFlag">
          <div>
            <h3>距离开始还剩</h3>
            <div class="video-time">  
              <van-count-down :time="beforeDay(courses.limit_time)">
                <template #default="timeData">
                  <span class="block">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes < 10 ?'0':''}}{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
          
        </div>
      </div>
      <!--会员答题模块显示-->
      <div class="goods-course">
        <div class="course-title">
          <div class="answer-tab flex">
            <div class="answer-item" 
              :class="[answerType === 1 ?'on ':'bg-left',courses.reward_type == 0 && courses.reward_status == 1?'':'bg-width']"  
              @click="answerClick(1)">
              <span class="">介绍</span>
            </div>
            <div class="answer-item" :class="answerType === 2 ?'on ':'bg-right '" 
              @click="answerClick(2)" v-show="courses.reward_type == 0 && courses.reward_status == 1">
              <span >答题</span>
            </div>
          </div>
          <div class="title-describe" v-if="answerType === 1">
            <div class="title-box">
              <span class="datum-tag">{{courses.cycle}}期</span>
              <span class="title ">{{courses.name}}</span>
            </div>
            <p class="ell">{{courses.desc}}</p>
          </div>
          <div class="answer-course" v-if="answerType === 2 && courses.reward_type == 0 && courses.reward_status == 1">
            <h3>{{courses.topic && courses.topic.title}}</h3>
            <div class="answer-list">
              <block v-for="(item,index) in courses.topic && courses.topic.options" :key="index">
                <div class="answer-box flex-a-c flex-j-sb " :class="answerIndex === index ? 'on':''" @click="topicOn(item.id,index)">
                  <p>{{item.name}}、{{item.content}}</p>
                  <p class="iconfont icon-info-tick"  v-if="answerIndex === index"></p>
                </div>
              </block>
            </div>
          </div>

        </div>
        <div class="course-details" v-if="answerType === 1">
          <div class="title">课程介绍</div>
          <div v-html="description"></div>
        </div>
        <div class="course-details" v-if="answerType === 1">
          <div class="title">主讲人介绍</div>
          <div v-html="textDescription"></div>
        </div>
      </div>
      <div class="h-52"></div>
      <!--会员模块显示-->
      <div class="member-video" 
        :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']" 
        @click="tipicConfrim" 
        v-if="hasFinish && courses.reward_status == 1 || (courses.reward_type == 0 && courses.reward_status == 1)">{{courses.reward_type == 0?'答题领红包':'观看完视频领红包'}}</div>
      <div class="member-video gray" 
        :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']" 
        v-if="!hasFinish && courses.reward_status == 1 &&  (courses.reward_type != 0 && courses.reward_status == 1)">{{courses.reward_type == 0?'答题领红包':'观看完视频领红包'}}</div>
    </div>
    <div class="efficacy" v-if="coursesErrorType === 2">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/lose-efficacy.png" />
      <div class="describe">
        <p>{{descMsg}}</p>
      </div>
    </div>
    <div class="efficacy" v-if="coursesErrorType === 1">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/cannot-video.png" />
      <div class="describe">
        <p>{{descMsg}}</p>
      </div>
    </div>


    <van-popup v-model="errorShow" :style="{borderRadius: '1.5625rem',width:'66%' }" :close-on-click-overlay="false">
      <div class="error-main">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/warning.png" />
        <div class="error-title">
          <h3>{{errorMsg}}</h3>
          <p v-if="optionsId && courses.reward_type == 0">正确答案：{{awserObj.name}}、{{awserObj.content}}</p>
        </div>
        <div class="error-btn flex" @click.stop="resetClick">{{courses.reward_type == 0?'重新答题':'重新看视频'}}</div>
      </div>
    </van-popup>

    <van-popup v-model="succeesShow" :style="{borderRadius: '1.5625rem',width:'70%' }" :close-on-click-overlay="false">
      <div class="succees-main">
        <h3 v-if="courses.reward_type == 0">答题成功</h3>
        <div class="packet">
          <h4>恭喜您获得红包</h4>
          <p>{{courses.reward_price}}<span>元</span></p>
        </div>
        <div class="succees-btn" @click="sucClick">我知道了</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import memberDetails_controller from "./memberDetails_controller.js";
export default memberDetails_controller;
</script>
<style>
video::-webkit-media-controls-play-button {
      display: none !important;
}
video::-webkit-media-controls-current-time-display{
display: none;
}
video::-webkit-media-controls-time-remaining-display {
display: none;
}
video::-webkit-media-controls-start-playback-button {display: none;}
video::-internal-media-controls-overflow-button{ display: none !important;}
/*其实这倒不是什么大问题，但是为了样式统一，以及方便监控事件，可以在css中取消这个按钮*/
video::-webkit-media-controls-start-playback-button {
  opacity: 0;
}
.course-details img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.course-details p {
  overflow-wrap: break-word;
}
</style>
<style lang="scss" scoped>

.video-main {
  position: relative;
  .video-pay {
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index: 90;
    padding:14px 15px 14px 15px;
    border-radius: 50%;
    transition: 0.5ms;
    background-color: rgba($color: #0A0A0A, $alpha: 0.7);
    .icon-ht_more_right {
      color:#fff;
      font-size: 1.25rem;
    }
  }
  .video-tag {
    position: absolute;
    left:10px;
    top:10px;
    z-index: 90;
    font-size: 0.6875rem;
    line-height: 0.6875rem;
    background: #F15353;
    color:#fff;
    border-radius: 0.5rem;
    padding:0.25rem 0.5rem;
  }
  .playback {
    background-color: #FFA733;
  }
}
.video-time {
  .van-count-down {
    padding:14px 0 0 0;
    .block {
      padding:4px 8px;
      font-size: 14px;
      color: #FFFFFF;
      border-radius: 5px 5px 5px 5px;
      background-color: rgba($color: #FFFFFF, $alpha: 0.4);
      margin:0 3px;
    }
    .colon {
      font-size: 13px;
      color: #FFFFFF;
    }
  }
}
.video-make {
  width:100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.5);
  position:absolute;
  top:0;
  left:0;
  z-index: 5;
  h3 {
    color: #FFFFFF;
    font-size: 14px;
  }
}

.h-52 {
  height: 3.25rem;
  clear: both;
}
.pl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* 定义显示的行数*/
  overflow: hidden;
}

  .goods-course {
    margin:0.625rem 0.75rem 0 0.75rem;
    padding:0 0 1.0625rem 0;

    .course-title {
      background: #FFFFFF;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      // padding:1rem 0.75rem 1.25rem 0.75rem;
      margin:0 0 0.625rem 0 ;
      .answer-tab {
        background-color: #fff;
        border-radius:0.75rem 0.75rem 0rem 0rem;
        .answer-item {
          width:50%;
          font-weight: 400;
          color: #3B3B4A;
          font-size: 1rem;
          padding:1rem 0;
          position: relative;
        }
        .bg-width {
          width: 100%;
        }
        .on {
          color: var(--themeBaseColor);
          &::after {
            content:'';
            width: 20px;
            height: 3px;
            background: var(--themeBaseColor);
            border-radius: 15px 15px 15px 15px;
            position: absolute;
            bottom:10px;
            left:50%;
            transform: translateX(-50%);
          }
        }
        .bg-left {
          background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/bg_tab_left.png') center center;
          background-size: 100% 100%;
        }
        .bg-right {
          background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/bg_tab_right.png') center center;
          background-size: 100% 100%;
        }
        .gray-default {
          width:60%;
          // background: linear-gradient(360deg, #F0F0F1 0%, #FAFAFA 100%);
          border-radius: 0.75rem 0 0.75rem 0;
          // background:linear-gradient(-65deg, transparent 1.375rem, #F0F0F1 0%, #FAFAFA 100%);
        }
      }
      .title-describe {
        padding:1.25rem 0.75rem 1.25rem 0.75rem;
        border-radius: 0rem 0rem 0.75rem 0.75rem;
        .title-box {
          width:100%;
          line-height: 1.25rem;
          display: inline-block;
          text-align: left;
          padding-bottom: 0.625rem;
          .datum-tag {
            font-size: 0.6875rem;
            line-height: 0.6875rem;
            background: var(--themeBaseColor);
            color:#fff;
            border-radius: 0.1875rem 0.1875rem 0.1875rem 0.1875rem;
            padding:0.125rem 0.25rem;
          }
          .title {
            padding:0 0 0 0.1875rem;
            font-size: 1rem;
            color: #00001C;
            vertical-align:top;

          }
        }
      }
      .answer-course {
        padding:1.25rem 0.75rem 0.9375rem 0.75rem;
        h3 {
          font-weight: bold;
          color: #00001C;
          line-height: 1.25rem;
          font-size: 1rem;
          text-align: left;
        }
        .answer-list {
          padding:1.25rem 0 0 0;
          &:last-child  {
              margin-bottom: 0;
          }
          .answer-box {
            padding:1.0625rem 0.875rem;
            border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
            background: #FAFAFA;
            margin-bottom: 0.9375rem;
            p {
              font-size: 0.875rem;
              color: #00001C;
            }

          }
          .on {
            background: rgba(22,174,62,0.08);
            color: #16AE3E;
            p {
              color: #16AE3E;
            }
            .icon-info-tick {
              font-size:1.375rem;
            }
          }
        }
      }

      p {
        font-size: 0.8125rem;
        color: #6E6E79;
        line-height: 1.0625rem;
        text-align: left;
      }
      .icon-info-tick {
        font-size:1rem;
      }
    }
    .course-details {
      background: #FFFFFF;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      padding:0.75rem 0.75rem 0.875rem 0.75rem;
      margin: 0 0 0.625rem 0;
      text-align: left;
      .title {
        font-size: 1rem;
        font-weight: bold;
        color: #00001C;
        line-height: 1rem;
        text-align: left;
        padding-bottom: 0.75rem;
      }
    }
  }

  .footer-btn {
    width:23.4375rem;
    padding:0.5rem 0 0.6875rem 0;
    background-color: #fff;
    position: fixed;
    bottom:0;
    // left:0;
    justify-content: space-around;
    .datum {
      padding:0 0 0 1.25rem;
      h3 {
        font-size: 0.625rem;
        line-height: 0.625rem;
        color: #00001C;
      }
      .icon-zb_zhiboing {
        font-size:2rem;
        line-height: 1.4375rem;
      }
    }
    .copyUrl {
      font-size: 0.875rem;
      font-weight: 500;
      color: #FFFFFF;
      padding:0.6875rem 6.25rem;
      background: var(--themeBaseColor);
      border-radius: 1.3125rem 1.3125rem 1.3125rem 1.3125rem;
    }
  }

  .member-video {
    position: fixed;
    // bottom:0.625rem;
    bottom:0;
    margin:0 0.75rem;
    width:calc(23.4375rem - 1.5rem);
    padding:0.7188rem 0;
    font-size: 1rem;
    box-sizing: border-box;
    font-weight: 500;
    color: #FFFFFF;
    background: var(--themeBaseColor);
    border-radius: 1.5625rem 1.5625rem 1.5625rem 1.5625rem
  }
  .iphoneXStyle{
    bottom: 24px;
  }
  .gray {
    background-color: #ccc;
  }
  .member-m {
    padding:0 0.75rem;
  }
  .error-main {
    padding:0.9375rem 0rem;
    background: linear-gradient(180deg, rgba(241,83,83,0.17) 0%,rgba(255,255,255,0.17) 40%, rgba(255,255,255,0.17) 100%);


    img {
      width: 4rem;
      height: 4rem;
      display: block;
    }
    .error-title {
      padding:0.9375rem 0 2.4375rem 0;
      h3 {
        font-weight: bold;
        color: #00001C;
        font-size: 1.5rem;
        line-height: 1.5rem;
        padding:0 0 0.5625rem 0;
      }
      p {
        font-size: 0.9375rem;
        font-weight: 400;
        color: #6E6E79;
      }
    }
    .error-btn {
      display: inline-block;
      padding:0.75rem 2.625rem;
      font-size: 1rem;
      line-height: 1rem;
      font-weight: 500;
      color: #FFFFFF;
      background: #F15353;
      border-radius: 1.5625rem 1.5625rem 1.5625rem 1.5625rem;
    }
  }
  .succees-main {
    padding:1.375rem 0 1rem 0;
    background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/videoCourse/packet.png') no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    h3 {
      font-weight: bold;
      color: #FFF2D7;
      font-size: 1.5rem;
      line-height: 1.5rem;
    }
    .packet {
      padding:2.375rem 0 2.0625rem 0;
      h4 {
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 500;
        color: #AC1D1D;
        padding:0 0 0.5625rem 0;
      }
      p {
        font-weight: bold;
        color: #E41414;
        font-size: 2rem;

        span {
          font-size: 0.8125rem;
          padding-left: 0.125rem;
        }
      }
    }
  }
  .succees-btn {
    display: inline-block;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 500;
    color: #AC1D1D;
    padding:0.75rem 2.625rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAE9CE 100%);
    border-radius: 1.5625rem 1.5625rem 1.5625rem 1.5625rem;
  }
  .efficacy {
    padding:11.875rem 0 0 0;
    img {
      width:7.1875rem;
      height: 7.1875rem;
      padding: 0 0 0.5rem 0;
    }
    .describe {
      font-weight: 400;
      color: #6E6E79;

      font-size: 0.8125rem;
      text-align: center;
      p {
        line-height: 1.0625rem;
      }
    }
  }

</style>